<template>
  <view class="custom-tab-bar">
    <view
      v-for="(item, index) in tabList"
      :key="index"
      class="tab-item"
      :class="{ active: currentTab === index }"
      @click="switchTab(index, item.path)"
    >
      <view class="tab-icon-wrapper">
        <view class="tab-icon" :class="{ 'icon-active': currentTab === index }">
          <image
            :src="currentTab === index ? item.selectedIconPath : item.iconPath"
            :class="['tab-icon-image', { 'icon-image-active': currentTab === index }]"
          />
        </view>
      </view>
      <text class="tab-text" :class="{ 'text-active': currentTab === index }">
        {{ item.text }}
      </text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

interface TabItem {
  text: string
  iconPath: string
  selectedIconPath: string
  path: string
}

const currentTab = ref(0)

const tabList: TabItem[] = [
  {
    text: '首页',
    iconPath: '/static/NavigateImage/Home.png',
    selectedIconPath: '/static/NavigateImage/selectedHome.png',
    path: 'pages/index/index',
  },
  {
    text: '消息',
    iconPath: '/static/NavigateImage/Xiaoxi.png',
    selectedIconPath: '/static/NavigateImage/selectedXiaoxi.png',
    path: 'pages/message/message',
  },
  {
    text: '医疗',
    iconPath: '/static/NavigateImage/Yl.png',
    selectedIconPath: '/static/NavigateImage/selectedYl.png',
    path: 'pages/medical/medical',
  },
  {
    text: '我的',
    iconPath: '/static/NavigateImage/my.png',
    selectedIconPath: '/static/NavigateImage/selectedMy.png',
    path: 'pages/profile/profile',
  },
]

const switchTab = (index: number, path: string) => {
  currentTab.value = index
  uni.reLaunch({
    url: '/' + path,
  })
}

// 根据当前页面路径设置激活状态
onMounted(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const currentPath = currentPage.route

  const tabIndex = tabList.findIndex((item) => item.path === currentPath)
  if (tabIndex !== -1) {
    currentTab.value = tabIndex
  }
})
</script>

<style scoped>
.custom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 30rpx 30rpx 0 0;
  z-index: 999;
  padding: 0 40rpx;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  position: relative;
  transition: all 0.3s ease;
}

.tab-icon-wrapper {
  position: relative;
  margin-bottom: 8rpx;
}

.tab-icon {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  background: transparent;
}

.tab-icon.icon-active {
  width: 80rpx;
  height: 80rpx;
  background: radial-gradient(circle, #66bb6a 0%, #4caf50 100%);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
  transform: translateY(-10rpx);
}

/* 替换标签选择器为类选择器 */
.tab-icon-image {
  width: 50rpx;
  height: 50rpx;
  transition: all 0.3s ease;
  opacity: 0.6;
}

.icon-image-active {
  width: 50rpx;
  height: 50rpx;
  filter: brightness(0) invert(1);
  opacity: 1;
}

.tab-text {
  font-size: 24rpx;
  color: #666;
  font-weight: 400;
  transition: all 0.3s ease;
  opacity: 0;
  transform: scale(0.8);
  height: 0;
  overflow: hidden;
  margin-top: 0;
}

.tab-text.text-active {
  color: #4caf50;
  font-weight: 600;
  opacity: 1;
  transform: scale(1);
  height: auto;
  margin-top: 4rpx;
}

/* 适配底部安全区域 */
.custom-tab-bar {
  padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
}

/* 响应式设计 */
@media (max-width: 375px) {
  .custom-tab-bar {
    height: 110rpx;
  }

  .tab-icon {
    width: 50rpx;
    height: 50rpx;
  }

  .tab-icon.icon-active {
    width: 70rpx;
    height: 70rpx;
  }

  .tab-text {
    font-size: 22rpx;
  }
}
</style>
